<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 500px;
            border: 1px solid #000;
            background-image: url(./imgs/bj2.png);
            background-color: red;
            background-repeat: no-repeat;
            background-size: 200px;

            /* 该属性是用于设置背景图片在盒子容器里面的位置*/
            /* 默认情况是从左上角进行平铺*/
            /*第一个值：水平  第二值垂直*/
            background-position: 10px 20px;

            /* 一般这个属性在什么时候使用？ 一般在做图片精灵（也被称为雪碧图 sprite）的时候使用*/

            /* 什么叫做图片精灵（雪碧图）？ 为什么要使用雪碧图？*/

            /* 在我们做网页的时候，一般网站里面会出现很多的这种小的图标（小图片），一般称之为 icon 。*/

            /* 拟物化和扁平化一种设计风格 */
            /* 小图标： 1. 拟物化的小图标 2. 扁平化的小图标*/

            /* 拟物化的小图标最先是在 iphone4 的手机上面得以体验*/

            /* 网页里面会出现很多的小图标。那么开发人员会把小图标全部放置一个图片文件里面的，然后使用 background-position 技术，移动图片的位置来显示与之要显示的小图标。*/

            /* 开发人员为什么要把这些小图片放置一个文件里面。因为我们不放在一起，单个的为这些标签设置背景图，也可以实现对应的效果。主要的原因是，我们的网站上线后，是放置远端的服务器上面的。 这种架构模式叫做 b/s 模式（browser server）浏览器 服务器模式*/


            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>